<template>
    <div class="result_board">
        <div class="result-board-text" v-if="$store.state.pk.loser === 'all'">
            平局
        </div>
        <div class="result-board-text" v-else-if="$store.state.pk.loser === 'A' && $store.state.pk.a_id == $store.state.user.id">
            失败
        </div>
        <div class="result-board-text" v-else-if="$store.state.pk.loser === 'B' && $store.state.pk.b_id == $store.state.user.id">
            失败
        </div>
        
        <div class="result-board-text" v-else>
            胜利
        </div>

        <div class="result-board-btn">
            <button type="button" @click="restart()" class="btn btn-info btn-lg">重新开始</button>
        </div>
    </div>
</template>

<script>
import { useStore } from 'vuex';

export default {
    setup() {
        const store = useStore();
        const restart = () => {
            store.commit("updateStatus", "matching");
            store.commit("updateLoser", "none");
            store.commit("updateOpponent", {
                username: "我的对手",
                photo: "https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png"
            })
        }

        return {
            restart,
        }
    }
}

</script>

<style scoped>
    div.result_board {
        height: 30vh;
        width: 30vw;
        background-color: rgba(50, 50, 50, 0.5);
        position: absolute;
        top: 30vh;
        left: 35vw;
    }

    div.result-board-text {
        color: white;
        font-size: 50px;
        text-align: center;
        font-weight: 600;
        font-style: italic;
        padding: 15px;
    }

    div.result-board-btn {
        text-align: center;
        padding-top: 10px;
    }
</style>